<template>
    <div class="fillcontain">
        <el-form :model="formData" label-position="labelPosition" inline="true" ref="formData"
                 class="demo-form-inline" style="margin-left: 10px;margin-right: 10px">
            <el-col :span="6">
                <el-form-item label="">
                    <el-input
                        size="mini"
                        style="width: 200px"
                        placeholder="请输入姓名"
                        prefix-icon="el-icon-search"
                        v-model="formData.name">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 200px" @change="schoolchange" v-model="formData.schoolid" placeholder="请选择校区">
                        <el-option
                            v-for="item in schoolList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 200px" v-model="formData.eid" placeholder="请选择老师">
                        <el-option
                            v-for="item in empsList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 200px" v-model="formData.usertype" placeholder="请选择类别">
                        <el-option
                            v-for="item in onusertypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 200px" v-model="formData.onTime" placeholder="请选择上课时间">
                        <el-option
                            v-for="item in periodList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-date-picker size="mini" style="width: 200px"
                                    v-model="formData.beginTime"
                                    align="right"
                                    type="date"
                                    placeholder="开始日期"
                                    :picker-options="pickerOptions1">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-date-picker size="mini" style="width: 200px"
                                    v-model="formData.endTime"
                                    align="right"
                                    type="date"
                                    placeholder="结束日期"
                                    :picker-options="pickerOptions1">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-button type="primary" size="mini" icon="el-icon-search">搜索</el-button>
        </el-form>
        <div class="table_container">
            <el-table
                v-loading="loading"
                :data="tableData"
                highlight-current-row
                style="width: 100%">
                <el-table-column
                    property="uid"
                    label="id"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="username"
                    label="姓名"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="ename"
                    label="授课老师"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="subject"
                    label="课题"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="periodname"
                    label="上课时段"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="schoolname"
                    label="学校"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="shouldDay"
                    label="应上时间"
                    :formatter="dateFormat"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="realDay"
                    label="实上时间"
                    :formatter="dateFormat"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="comments"
                    label="请假原因"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property=""
                    label="操作"
                    min-width="10%">
                    <template scope="scope">
                        <el-button @click="buke(scope.$index,scope.row)" type="text" size="small">补课</el-button>
                        <el-button @click="del(scope.$index,scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="20"
                    layout="total, prev, pager, next"
                    :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import * as moment from 'moment';
    import {getUserList, queryCheckWorkHistory,deleteCheckLeave} from '@/api/getData'

    export default {
        data() {
            return {
                loading:false,
                empsList:[],
                formData:{
                    status:'2',
                    name:'',
                    schoolid:'',
                    eid:'',
                    usertype:'',
                    periodid:'',
                    beginTime:'',
                    endTime:'',
                    pageno:1,
                    pagesize:10,

                },
                tableData: [],
                currentRow: null,
                offset: 0,
                limit: 20,
                count: 0,
                currentPage: 1,
            }
        },
        computed: {
            ...mapGetters(['schoolList', 'usertypeList', 'periodList', 'empschoolMap', 'onusertypeList'])
        },
        components: {
            headTop,
        },

        created() {
            this.initData();
        },
        mounted() {
            if (this.periodList.length == 0) {
                this.getPeriod();
            }
            if (this.empschoolMap == null) {
                this.fillSchoolEmps();
            }
            if (this.schoolList == null) {
                this.getAllSchool();
            }
        },
        methods: {
            ...mapActions(['getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool']),
            buke(index,row){
               // alert(row.uid);
                this.$router.push({name:'/checkListOfUser',params:{uid:row.uid}});
            },
            dateFormat:function(row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD");
            },
            schoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
                this.empsList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.empsList.push(item);
                    });
                }
            },
            async del(a,row) {
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.confirmdelete(row);
                });


            },
            async confirmdelete(row) {
                var data={"data":{"id":row.id}}
                await deleteCheckLeave(data)
                this.initData();
                this.$message({
                    type: 'success',
                    message: '删除成功'
                });
            },


            async initData() {
                this.loading=true;
                const v = await queryCheckWorkHistory({"data": this.formData});
                if (v.success == true) {
                    this.count=v.data.totalCount;
                    const studList = v.data.values;
                    this.tableData = [];
                    studList.forEach(item => {
                        const td = {};
                        td.status=2;
                        td.id=item.id;
                        td.uid=item.uid;
                        td.checked=false;
                        td.username = item.username;
                        td.ename = item.ename;
                        td.schoolname = item.schoolname;
                        td.subject = item.subject;
                        td.shouldDay = item.shouldDay;
                        td.realDay = item.realDay;
                        td.comments = item.comments;
                        td.summary = item.summary;
                        this.tableData.push(td);
                    });
                    this.loading=false;
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.form.pageno = val;
                this.offset = (val - 1) * this.limit;
                this.getUsers()
            },

        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }

</style>
